<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马头条</title>
    <style>
        body {
            background: url("../img/bg.png");
        }

        .div {
            background-color: wheat;
            width: 500px;
            margin: auto;
        }

        div {
            text-align: center;
        }
    </style>

</head>
<body>
<!--行头-->
<div>
    <img src="../img/logo.png">
</div>

<div class="div">
    <div align="center">
        注册详情
        <hr/>
    </div>
    <div>
        <form action="#" method="get">
            <div>姓名:<input type="text" name="username" placeholder="请输入用户名"></div>
            <div>密码:<input type="password" name="password" placeholder="请输入密码"></div>
            <div>邮箱:<input type="email" name="email" placeholder="邮箱"></div>
            <div>手机:<input type="tel" name="tel" placeholder="请输入手机号"></div>
            <hr/>
            <div>
                &nbsp;&nbsp;   &nbsp;&nbsp;   性别:<input type="radio" name="gender" value="男"checked>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="女">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div>
                爱好:<input type="checkbox" name="hobby" value="game" checked> 游戏
                <input type="checkbox" name="hobby" value="music">音乐
            </div>
            <div>
                出生日期:<input type="date" name="date">
            </div>
            <div>
                所在城市:
                <select name="city">
                    <option>----请选择---</option>
                    <optgroup label="直辖市">
                        <option name="bj">北京</option>
                        <option name="sh">上海</option>
                    </optgroup>
                    <optgroup label="省会">
                        <option name="wh">武汉</option>
                        <option name="hf">合肥</option>
                    </optgroup>
                </select>
            </div>
            <hr/>
            <div>
                个性签名:<textarea cols="20" rows="5" name="desc">
                </textarea>
            </div>
            <hr/>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </div>

</div>
</body>
</html>